<template>
    <div class="app-container">
        <div class="demo-image">
            <el-row>
                <el-col :span="4" v-for="item in list" :key="item.thumb">
                    <div class="block">
                        <el-image
                            style="max-width: 100%;max-height:98% "
                            :src="item.thumb"
                            fit="contain"
                            :preview-src-list="[item.picture]"
                            ></el-image>
                            <div class="demonstration">{{item.add_time | format}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="text-align: center;margin-top: 30px;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :current-page.sync="listQuery.page"
                :page-size="listQuery.pagesize"
                @current-change="current_change">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { list } from '@/api/timing'
    import moment from 'moment'
    export default {
        data() {
            return {
                interval:undefined,
                listQuery: {
                    page: 1,
                    pagesize: 24,
                    deviceid: undefined,
                    channelid: undefined
                },
                list: null,
                total: 0,   // 记录数量
                listLoading: true,
            }
        },
        created() {
            this.listQuery.page =1
            this.listQuery.deviceid = this.$route.query.deviceid
            this.listQuery.channelid = this.$route.query.channelid
            this.fetchData()
            let me = this
            this.interval=setInterval(function(){
                console.info('自动刷新')
                me.fetchData()
            },60*1000);
        },
        beforeDestroy(){
            clearInterval(this.interval)
        },
        filters:{
            format(date) {
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD HH:mm:ss");
            }
        },
        methods:{
            fetchData() {
                this.listLoading = true
                list(this.listQuery).then(response => {
                    this.list = response.data.items
                    this.srcList=[]
                    this.list.forEach((v)=>{
                        this.srcList.push(v.picture)
                    })
                    this.listLoading = false
                    this.total = response.data.total
                })
            },
            current_change: function(page) {
                this.listQuery.page = page
                this.fetchData()
            }
        }
    }
</script>
<style scoped>
    div.block{text-align:center;margin-top:5px;margin-bottom:5px}
    .demonstration{font-size:0.8rem}
</style>